import PageContainer from '@/components/PageContainer';
import useToggle from '@/hooks/useToggle';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import { ConfigProvider, Tabs } from '@taroify/core';
import { View } from '@tarojs/components';
import { useDidShow } from '@tarojs/taro';
import i18n from 'i18n-js';
import React from 'react';
import deviceShareModel from '@/models/deviceShare';
import './index.less';
// import Rooms from './rooms';
import MyShareDeviceList from './MyShareDeviceList';
import ShareToMeDeviceList from './ShareToMeDeviceList';


const dstyles = GStyleSheet.create({
  container: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    backgroundColor: '#fff',
  },
  tabs: {
    display: 'flex',
    flexDirection: 'row',
  },
  tab: {
    height: '52rpx',
    lineHeight: '52rpx',
    textAlign: 'center',
    fontSize: '28rpx',
    color: '#878787',
    margin: '0 6rpx',
    padding: '0 18rpx',
    backgroundColor: '#fff',
    borderRadius: '26rpx',
  },
  activeTab: {
    backgroundColor: DynamicColors.tintColor,
    color: '#fff',
  },
  bottom: {
    height: 100,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  manageIcon: {
    width: 16,
    height: 16,
    marginRight: 10,
  },
});

const myShareId = 'MY_SHARE'
const shareToMe = 'SHARED_WITH_ME'

const tabs: ['MY_SHARE', 'SHARED_WITH_ME'] = [myShareId, shareToMe];

const SharedDevices = React.memo(() => {
  const styles = dstyles.style;
  const [tab, { set: setTab }] = useToggle(...tabs);

  useDidShow(() => {
    deviceShareModel.init();
  })

  return (
    <PageContainer title={i18n.t('DEVICE_SHARED_MANAGE')}>
      <View className='share-devices-container' style={styles.container}>
        <ConfigProvider
          theme={{
            tabsActiveColor: DynamicColors.tintColor.value,
            tabsLineWidth: '70%'
          }}
        >
          <Tabs lazyRender value={tab} onChange={setTab}>
            <Tabs.TabPane value={myShareId} title={i18n.t(myShareId)}>
              <MyShareDeviceList />
            </Tabs.TabPane>
            <Tabs.TabPane value={shareToMe} title={i18n.t(shareToMe)}>
              <ShareToMeDeviceList />
            </Tabs.TabPane>
          </Tabs>
        </ConfigProvider>
      </View>
    </PageContainer>
  );
});

export default SharedDevices;
